<template>
	<view class="wrap">
		<!-- 动态列表 -->
		<scroll-view class="scroll-list msg-list-item" scroll-y="true">
			<view v-for="(item,index) in moments" :key="index">
				<u-card :title="item.nickname" :sub-title="item.time" padding="30" margin="30rpx 20rpx"
					thumb="/static/aidex/images/list-icon.png" :border="false">
					<view class="" slot="body">
						<!-- 文字部分 -->
						<view class="u-body-item u-flex  u-col-between u-p-t-0">
							<view class="moment-text">
								{{item.message}}
							</view>
						</view>
						<u-gap height='20' color='ffffff'></u-gap>
						<!-- 图片部分 -->
						<u-grid :col="2" :border="false">
							<u-grid-item v-if="item.image1!=null" style='padding: 10rpx;'>
								<u-image width="100%" height="300rpx" :src="item.image1" />
							</u-grid-item>
							<u-grid-item v-if="item.image2!=null" style='padding: 10rpx;'>
								<u-image width="100%" height="300rpx" :src="item.image3" />
							</u-grid-item>
							<u-grid-item v-if="item.image3!=null" style='padding: 10rpx;'>
								<u-image width="100%" height="300rpx" :src="item.image3" />
							</u-grid-item>
							<u-grid-item v-if="item.image4!=null" style='padding: 10rpx;'>
								<u-image width="100%" height="300rpx" :src="item.image4" />
							</u-grid-item>
						</u-grid>
					</view>
					<!-- 点赞部分 -->
					<view class="" slot="foot">
						<u-icon name="eye" size="34" color="" label="30" />
						<u-icon name="thumb-up" size="34" color="" :label="item.like" />
					</view>
				</u-card>
			</view>
			<u-divider>已经到底了</u-divider>
		</scroll-view>
		<!-- 发送按钮 -->
		<uni-fab :pattern="pattern" :content="content" @trigger="trigger" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keywords: '',
				moments: [],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				content: [{
						iconPath: '/static/aidex/tabbar/msg_1.png',
						selectedIconPath: '/static/aidex/tabbar/msg_2.png',
						text: '发表',
						active: false
					},
					{
						iconPath: '/static/aidex/tabbar/my_1.png',
						selectedIconPath: '/static/aidex/tabbar/my_2.png',
						text: '我的',
						active: false
					}
				]
			};
		},
		onLoad() {
			this.$u.api.message.findMoments().then(res => {
				if (this.$store.state.moments && (this.$store.state.moments.length > res.data.length)) {
					this.moments = this.$store.state.moments
				} else {
					this.moments = res.data
					this.$u.vuex('moments', res.data)
				}
			})
		},

		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			trigger(e) {
				if (e.item.text === '发表') {
					this.navTo('/pages/sys/msg/new')
				} else if (e.item.text === '我的') {
					this.navTo('/pages/sys/msg/my-moment')
				}
			},

		}
	};
</script>

<style lang="scss">
	@import '../../../common/uni.css';

	.scroll-list {
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 30rpx);
		width: 100%;

		.loadmore {
			padding: 30rpx;
		}
	}

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.u-card__foot {
		.u-icon {
			margin-right: 10px;
		}
	}


	.moment-text {
		font-size: 16px;
		letter-spacing: 2px;
	}
</style>
